<template>
<div>
  <el-form
    label-position="left"
    label-width="100px"
    style="width: 400px;margin-top: 30px "
    >




    <el-form-item label="图片" style="margin-left: 40px">
      <el-upload
        class="avatar-uploader"
        :action="uploadBaseUrl"
        :show-file-list="false"
        :on-success="handleAvatarSuccess">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span style="color: red">(点击图片即可选择修改图片)</span>
    </el-form-item>

    <el-form-item style="margin-left: 100px">
      <el-button type="primary" size="mini" @click="updateImg()">修改</el-button>
    </el-form-item>

  </el-form>
</div>
</template>

<script>
  import {updateHomePic} from '@/api/homeImage'
    export default {
        name: "index",
      data(){
          return{
            baseUrl:process.env.VUE_APP_BASE_API+'/static/pic/show/',
            uploadBaseUrl:process.env.VUE_APP_BASE_API+'/static/pic/upload',
            imageUrl: process.env.VUE_APP_BASE_API+'/static/pic/homePic',
            image:''
          }
      },
      created() {
          this.getHomeImage()
      },
      methods:{
        getHomeImage(){

        },
        handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          this.image=res.data
          console.log(this.image)
        },
        updateImg(){
          updateHomePic(this.image).then(res =>{
            this.$notify({
              title: 'Success',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
          })
  }
      }
    }
</script>

<style >
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
